<template>
    <div>
        <nav>
            <div class="left">
                <el-image style="" :src="info?.logo" :fit="'fill'" />
            </div>

            <div class="center">
                <div>
                    <router-link to="/page/store" @click="tabbarStore.setPage('store');tabbarStore.setTabIndex(1)">整店定制</router-link>
                    <router-link to="/page/house"  @click="tabbarStore.setPage('house');tabbarStore.setTabIndex(1)">全屋定制</router-link>
                    <router-link to="store">联系我们</router-link>

                </div>
            </div>

            <div class="right">
                <router-link to="login">去登录</router-link>

                <el-image style="height:30px" :src="navImg?.background?.collection" :fit="'fill'" />
                <el-image style="height:30px" :src="navImg?.background?.cart" :fit="'fill'" />
            </div>
        </nav>
        <main>
            <div>
                <el-image style="" :src="info?.homeImageUrl" :fit="'fill'" />
            </div>
            <div class="goto">
                <router-link to="store">整店定制</router-link>
                <router-link to="house">全屋定制</router-link>
            </div>
        </main>
        <footer>
            Copyright © 2018 showjane.com Inc.All Rights Reserved. 浙江浦江秀匠家具有限公司版权所有 浙ICP备20024704号-1
        </footer>
    </div>
</template>



<script setup lang="ts">
import { useTabbarStore } from '@/stores/TabbarStore'
const tabbarStore = useTabbarStore()
import { getHomeInfo, getNav } from '../../apis/apis';
import { onMounted, ref } from 'vue';
const info = ref<{
    logo?: string;
    [propName: string]: any,
}>({})
const navImg: any = ref({})

onMounted(async () => {
    try {
        info.value = await getHomeInfo()
        navImg.value = await getNav()
        console.log(info.value);
        console.log(navImg.value);
    } catch (error) {

    }

})


</script>


<style scoped lang="scss">
a {
    text-decoration: none;
    color: #000;
}

nav {
    width: 1280px;
    margin: 10px auto;
    display: flex;

    & .left {
        display: flex;
        align-items: center;
    }

    & .center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        &>div {
            width: 600px;

            &>a {
                font-size: 16px;
                margin-right: 80px;
                font-weight: bold;
            }

            &>a:nth-of-type(1) {
                color: #54BAC9;
            }

            &>a:nth-of-type(2) {
                color: #C51C1E;
            }
        }
    }

    & .right {
        display: flex;
        height: 46px;
        align-items: center;
        width: 160px;
        justify-content: space-evenly;

        &>:nth-child(1) {
            background-color: #329DAC;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            font-size: 14px;
            line-height: 46px;
            color: #fff;
            overflow: hidden;
        }
    }
}

main {
    width: 1920px;
    height: 858px;
    margin: 0 auto;
    position: relative;

    & .goto {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-90px, -50px);
        width: 180px;
        height: 28px;
        line-height: 28px;
        display: flex;
        justify-content: space-between;

        & a {
            flex: 1;
            opacity: 0;

        }

        & a:nth-of-type(1) {
            margin-right: 10px;
        }
    }

}

footer {
    background-color: #F5F5F5;
    padding: 20px 0;
    text-align: center;
    color: #525252;
    font-size: 12px;
}
</style>